window.addEventListener("load", async () => {
  try {
    const res = await axios({
      url: "/dashboard",
      // 当多处需要用到 token 值的时候 我们可以去公用区域（common.js）统一注入 token
      // headers:{
      //   Authorization: localStorage.getItem("token")
      // }
    });
    
    function salaryEcharts(year) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#line"));

      // 指定图表的配置项和数据
      option = {
        // grid: {
        //   left: "12%",
        //   top: "14%",
        //   right: "14%",
        //   bottom: "14%",
        // },
        title: {
          text: "2022年薪资走势",
          top: "3%",
          left: "3%",
        },
        xAxis: {
          type: "category",
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
              width: "2",
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              width: "2",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: "13",
            lineStyle: {
              width: "8",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#409eff", // 0% 处的颜色
                  },
                  {
                    offset: 0.66,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["#409eff"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salaryEcharts(res.data.year);


    function zuSalary(groupData) {
      var myChart = echarts.init(document.querySelector("#lines"));
      const option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              width: "2",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
            symbolSize: "13",
            lineStyle: {
              width: "8",
            },
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
            symbolSize: "13",
            lineStyle: {
              width: "8",
            },
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#7952f7", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#4a9fee", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#b183fe", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#4797ff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
      };
      myChart.setOption(option);
      // 点击切换数据
      const btn = document.querySelectorAll("#btns .btn");
      btn.forEach((item) => {
        item.addEventListener("click", function () {
          // 排他思想
          document
            .querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
          this.classList.add("btn-blue");
          const index = this.innerHTML.trim();
          option.xAxis.data = groupData[index].map((v) => v.name);
          option.series[0].data = groupData[index].map((v) => v.hope_salary);
          option.series[1].data = groupData[index].map((v) => v.salary);
          myChart.setOption(option);
        });
      });
    }
    zuSalary(res.data.groupData);


    console.log(res.data.provinceData);

    function twoSalary(twobing) {
      var myChart = echarts.init(document.querySelector("#gender"));
      // const data = twobing.map(v=>{
      //   return {
      //     name: v.value,
      //     value: v.g_count,
      //   }
      // })
      option = {
        title: [
          {
            text: "男女薪资分布",
            left: "6%",
            top: "6%",
          },
          {
            subtext: "男生",
            left: "center",
            top: "48%",
            subtextStyle: {
              color: "#333",
              fontSize: 12,
              fontWeight: "bold",
            },
          },
          {
            subtext: "女生",
            left: "center",
            top: "88%",
            subtextStyle: {
              color: "#333",
              fontSize: 12,
              fontWeight: "bold",
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["20%", "30%"],
            center: ["50%", "30%"],
            data: twobing.map(v=>{
              return {
                value: v.b_count,
                name: v.label
              }
            }),
            label: {
              position: "outer",
              alignTo: "none",
              bleedMargin: 5,
            },
          },
          {
            type: "pie",
            radius: ["20%", "30%"],
            center: ["50%", "70%"],
            data: twobing.map(v=>{
              return {
                value: v.g_count,
                name: v.label
              }
            }),
            label: {
              position: "outer",
              alignTo: "labelLine",
              bleedMargin: 5,
            },
          },
        ],
        color: ["#5097ff", "#3fceff", "#34d39a", "#fda224"],
      };
      myChart.setOption(option);
    }
    twoSalary(res.data.salaryData);


    function oneSalary(bing) {
      var myChart = echarts.init(document.querySelector("#salary"));
      // 渲染数据
      // 返回一个对象
      const data = bing.map((v) => {
        return {
          name: v.label,
          value: v.g_count + v.b_count,
        };
      });
      option = {
        title: {
          text: "班级薪资分布",
          top: "8%",
          left: "8%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "8%",
          left: "center",
        },
        series: [
          {
            name: "班级薪资分布",
            type: "pie",
            radius: ["48%", "58%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
        color: ["#5097ff", "#3fceff", "#34d39a", "#fda224"],
      };
      myChart.setOption(option);
    }
    oneSalary(res.data.salaryData);

    const initMapChart = (provinceData) => {
      const myEchart = echarts.init(document.querySelector('#map'))
      const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]
      
      provinceData.forEach(item => {
        dataList.find(v=>{
          if(item.name.indexOf(v.name) !== -1) {
            v.value = item.value
          }
        })
      })
      let option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
      myEchart.setOption(option)
    }
    initMapChart(res.data.provinceData)
    for (const k in res.data.overview) {
      document.querySelector(`[name=${k}]`).innerHTML = res.data.overview[k];
    }
  } catch (err) {
  }
});
